<script setup lang="ts">
import { onMounted } from 'vue'
import { ref } from 'vue'
import { Navigation, Pagination, Scrollbar, A11y } from 'swiper/modules'
import { Swiper, SwiperSlide } from 'swiper/vue'
// Import Swiper styles
import 'swiper/css'
import 'swiper/css/navigation'
import 'swiper/css/pagination'
import 'swiper/css/scrollbar'

const imgsrc = ref(
  'https://s.cn.bing.net/th?id=OHR.BrightonBoxes_ZH-CN0947219018_1920x1080.webp&qlt=50'
)
onMounted(() => {
  setTitle()
})
function setTitle() {
  window.api.setTitle('壁纸软件1.2')
}
function click() {
  console.log('click')
  window.api.setWallpaper('', '')
  fetch('http://cdn.apc.360.cn/index.php?c=WallPaper&a=getAllCategoriesV2&from=360chrome')
    .then((res) => {
      return res.json()
    })
    .then((data) => {
      console.log(data)
      fetch(
        'http://wallpaper.apc.360.cn/index.php?c=WallPaper&a=getAppsByCategory&cid=9&start=0&count=100&from=360chrome'
      )
        .then((res) => res.json())
        .then((data) => {
          console.log(data)
          imgsrc.value = data.data[0].url
        })
    })
}
function onSwiper() {
  console.log('onSwiper')
}

function onSlideChange() {
  console.log('onSlideChange')
}
</script>

<template>
  <div class="home">
    <!-- <img :src="imgsrc" alt="" srcset="" width="100%" /> -->
    <!-- <a-float-button @click="click" /> -->
    <swiper
      :modules="[Navigation, Pagination, Scrollbar, A11y]"
      :slides-per-view="3"
      :space-between="50"
      navigation
      :pagination="{ clickable: true }"
      :scrollbar="{ draggable: true }"
      @swiper="onSwiper"
      @slideChange="onSlideChange"
    >
      <swiper-slide> <img :src="imgsrc" alt="" srcset="" width="100%" /></swiper-slide>
      <swiper-slide> <img :src="imgsrc" alt="" srcset="" width="100%" /></swiper-slide>
      <swiper-slide> <img :src="imgsrc" alt="" srcset="" width="100%" /></swiper-slide>
      <swiper-slide> <img :src="imgsrc" alt="" srcset="" width="100%" /></swiper-slide>
      <swiper-slide> <img :src="imgsrc" alt="" srcset="" width="100%" /></swiper-slide>
      <swiper-slide> <img :src="imgsrc" alt="" srcset="" width="100%" /></swiper-slide>
    </swiper>
  </div>
</template>

<style scoped>
.home {
  width: 700px;
  height: 100%;
}
</style>
